<template>
<view class="comp-loading">
		<div v-show="isLoading" class="loading-wrapper" >
			<slot name="loading"></slot>
			<div v-if="!$slots.loading " class="loading-normal" >
				<image class="loading-icon" src="/static/loading.gif"/>
				<p class="hint-text loading">{{ loadingText }}</p>
			</div>
		</div>	
</view>
</template>
<script>
export default {
	name: 'comp-loading',
	props: {		
		isLoading: { type: Boolean, default: false },
		loadingText: { type: String, default: '加载中...' }, 
	},
}
</script>
<style lang="less">
.comp-loading{
	position: relative;
	z-index: 9999;
}
.loading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
	margin: 40rpx 0;
	.loading-normal{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.loading-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.hint-text {
		color: @font_light_color;
		font-size: 24rpx;
		margin: 40rpx;
		text-align: center;

		&.loading {
		margin: 0;
		}
	}
}

</style>